<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手记详情</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <script src="../module/ydui/ydui.flexible.min.js"></script>
    <link href="../module/ydui/ydui.min.css" rel="stylesheet">
    <style>
        .g-container {
            width: 100%;
            height: 100%;
            background: url("../img/bg.png") no-repeat top left;
            background-size: 100%;
        }

        /************** header begin **************/
        .header {
            width: 100%;
            height: 0.9rem;
            line-height: 0.9rem;
            text-align: center;
            font-size: 0.32rem;
            color: #FFFFFF;
            padding: 0 0.3rem;
            position: relative;
        }

        /************** header end **************/
        /************** content-wrap begin **************/
        .content-wrap {
            width: 100%;
            padding: 0.3rem;
        }

        .cnt-box {
            width: 100%;
            height: 100%;
            background-color: #fff;
            border-radius: 8px;
            overflow-x: hidden;
            overflow-y: scroll;
            -webkit-box-shadow: 0 0 20px 2px rgba(162, 162, 162, 0.5);
            -moz-box-shadow: 0 0 20px 2px rgba(162, 162, 162, 0.5);
            box-shadow: 0 0 20px 2px rgba(162, 162, 162, 0.5);
            padding: 0.3rem 0.2rem;
        }

        /************** content-wrap end **************/
        .download-app-box {
            width: 100%;
            height: 0.85rem;
            padding: 0 1.6rem 0 1.05rem; /*1.4+0.2*/
            overflow: hidden;
            font-size: 0.26rem;
            /*font-weight: bolder;*/
            color: #424451;
            position: relative;
        }

        .logo-ico {
            display: inline-block;
            width: 0.85rem;
            height: 0.85rem;
            background-repeat: no-repeat;
            background-size: contain;
            border-radius: 5px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .btn-download-app {
            display: inline-block;
            width: 1.4rem;
            /*height: 0.45rem;*/
            line-height: 0.45rem;
            border-radius: 0.225rem;
            background: #DE4E97;
            font-size: 0.24rem;
            color: #fff;
            font-weight: normal;
            text-align: center;
            position: absolute;
            top: 0.2rem;
            right: 0;
        }

        .cnt-img-box {
            width: 100%;
            height: 3.85rem;
            margin: 0.3rem 0 0.2rem;
        }

        .item-img {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }

        .cnt-goods-list {
            width: 100%;
            height: 1.5rem;
            font-size: 0;
        }

        .item-goos {
            width: 1.5rem;
            height: 1.5rem;
            float: left;
            margin-right: 0.1rem;
            border-radius: 5px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            overflow: hidden;
            position: relative;
        }

        .item-price {
            width: 100%;
            height: 0.3rem;
            line-height: 0.3rem;
            text-align: center;
            background: rgba(255, 255, 255, 0.5);
            font-size: 0.26rem;
            font-weight: bolder;
            color: #424451;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .zan-read-box {
            width: 100%;
            margin-top: 0.2rem;
            font-size: 0;
        }

        .zan {
            display: inline-block;
            font-size: 0.26rem;
            padding-left: 0.4rem;
            color: #A8B0BA;
            position: relative;
        }

        .zan:before {
            content: '';
            width: 0.3rem;
            height: 0.26rem;
            background: url("../img/share/zan@3x.png") no-repeat center center;
            background-size: contain;
            position: absolute;
            top: 0;
            left: 0;
        }

        .read {
            display: inline-block;
            font-size: 0.26rem;
            padding-left: 0.4rem;
            color: #A8B0BA;
        }

        .cnt-info-detail {
            width: 100%;
            padding: 0.2rem 0 0.4rem;
            font-size: 0.28rem;
            color: #424451;
            position: relative;
        }

        .cnt-info-detail:after {
            content: '';
            width: 100%;
            height: 1px;
            border-bottom: 1px solid #A8B0BA;
            position: absolute;
            bottom: 0;
            left: 0;
            -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
        }

        .cnt-comment-total {
            width: 100%;
            font-size: 0.28rem;
            padding: 0.4rem 0 0.2rem;
            color: #A8B0BA;
        }

        .cnt-comment-box {
            width: 100%;
        }

        .cnt-comment-box li {
            width: 100%;
            padding: 0 0 0 0.9rem;
            font-size: 0;
            margin-bottom: 0.3rem;
            position: relative;
        }

        .cmt-face {
            display: inline-block;
            width: 0.7rem;
            height: 0.7rem;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
        }

        .cmt-name {
            font-size: 0.3rem;
            color: #A8B0BA;
        }

        .cmt-info {
            font-size: 0.26rem;
            color: #424451;
            padding: 0.1rem 0 0.2rem;
            /*border-bottom: 1px solid #A8B0BA;*/
        }

        .cnt-comment-box li:last-child .cmt-info {
            border: 0;
        }
    </style>
</head>
<body>
<section class="g-container">
    <div class="header">
        <span>手记详情</span>
    </div>
    <div class="content-wrap">
        <div class="cnt-box">
            <div class="download-app-box">
                <div class="logo-ico" style="background-image: url(../img/share/logo.png)"></div>
                最新最潮最时尚的穿搭都在啊丫丫
                <a class="btn-download-app"
                   href="http://a.app.qq.com/o/simple.jsp?pkgname=com.shopin.android_m">立即下载</a>
            </div>
            <div class="cnt-img-box">
                <div class="item-img" style="background-image:url(../img/default.png)"></div>
            </div>
            <ul class="cnt-goods-list">
                <li class="item-goos" style="background-image: url(../img/default.png)">
                    <div class="item-price">￥299</div>
                </li>
                <li class="item-goos" style="background-image: url(../img/default.png)">
                    <div class="item-price">￥299</div>
                </li>
                <li class="item-goos" style="background-image: url(../img/default.png)">
                    <div class="item-price">￥299</div>
                </li>
            </ul>
            <div class="zan-read-box">
                <div class="zan">231</div>
                <div class="read"><span>27</span>次阅读</div>
            </div>
            <div class="cnt-info-detail">使得巨亏不得分割计费的比较好过半结构化，对不对房价根本对房价根本对房价根本梵蒂冈房东，对房价广泛的那个急切of的kg加快构建放到那个！！</div>
            <div class="cnt-comment-total">所有评论&nbsp;&nbsp;<span>5</span></div>
            <ul class="cnt-comment-box">
                <li>
                    <div class="cmt-face" style="background-image: url(../img/default.png)"></div>
                    <div class="cmt-name">Dolores</div>
                    <div class="cmt-info">就是当年对房价高的房价那几个发挥感觉好难过好久。</div>
                </li>
                <li>
                    <div class="cmt-face" style="background-image: url(../img/default.png)"></div>
                    <div class="cmt-name">Dolores</div>
                    <div class="cmt-info">就是当年对房价高的房价那几个发挥感觉好难过好久。</div>
                </li>
            </ul>
        </div>
    </div>
</section>
</body>
<script src="../module/jquery/2.1.4/jquery.min.js"></script>
<script>
    //resizeCntHeight
    resizeCntHeight();
    $(window).resize(function () {
        resizeCntHeight();
    });
    function resizeCntHeight() {
        $('.content-wrap').css({height: $('body').height() - $('.header').height() + 'px'});
    }
</script>
</html>